<div class="animated fadeIn">
  <div class="card">
    <div class="card-header">
      Bootstrap Progress
      <div class="card-header-actions">
        <a href="https://valor-software.com/ngx-bootstrap/#/progressbar" target="_blank">
          <small className="text-muted">docs</small>
        </a>
      </div>
    </div>
    <div class="card-body">
      <div class="row">
        <div class="col-sm-4">
          <progressbar class="progress" [value]="55" [max]="100"></progressbar>
        </div>
        <div class="col-sm-4">
          <progressbar class="progress progress-striped" [value]="22" [max]="100" type="warning">22%</progressbar>
        </div>
        <div class="col-sm-4">
          <progressbar class="progress progress-striped active" [max]="200" [value]="166" type="danger"><i>166 / 200</i></progressbar>
        </div>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header">
      Progress <small>dynamic</small>
    </div>
    <div class="card-body">
      <progressbar class="progress progress-striped progress-animated" [max]="max" [value]="dynamic">
        <span style="color:white; white-space:nowrap;">{{dynamic}} / {{max}}</span>
      </progressbar>

      <small><em>No animation</em></small>
      <progressbar class="progress progress-success" [value]="dynamic" [max]="100" type="success"><b>{{dynamic}}%</b></progressbar>

      <small><em>Object (changes type based on value)</em></small>
      <progressbar class="progress-bar progress-bar-striped progress-bar-animated" [value]="dynamic" [max]="max" [type]="type">
        {{type}} <i *ngIf="showWarning">!!! Watch out !!!</i>
      </progressbar>
      <br>
      <button type="button" class="btn btn-sm btn-primary" (click)="random()">Randomize</button>
    </div>
  </div>
  <div class="card">
    <div class="card-header">
      Progress <small>stacked</small>
    </div>
    <div class="card-body">
      <div class="row col-lg-12">
        <progressbar class="progress" [value]="stacked" [max]="100"></progressbar>
      </div>
      <br>
      <div class="row col-md-12">
        <button type="button" class="btn btn-sm btn-primary" (click)="randomize()">{{buttonCaption}} randomize</button>
      </div>
    </div>
  </div>
</div>
